<template>
  <el-dialog v-model="dialogVisible" width="85%" title="数据消耗时速" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <template #header>
      <div style="display: flex; align-items: center">
        <h2 style="font-size: var(--el-dialog-title-font-size); line-height: var(--el-dialog-font-line-height); color: var(--el-text-color-primary)">
          数据消耗时速
        </h2>
        <div>
          <box-from-border :disabled="pageLoad.loadState === true" style="flex-grow: 0; width: 210px; margin-left: 40px">
            <el-radio-group v-model="dataType" :disabled="pageLoad.loadState === true" @change="() => getBaseDataAxios()">
              <el-radio label="小时时速" :value="0"></el-radio>
              <el-radio label="分钟时速" :value="1"></el-radio>
            </el-radio-group>
          </box-from-border>
        </div>
      </div>
    </template>
    <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; min-height: 400px; padding: 0 20px"></base-skeleton>
    <div v-else-if="pageLoad.loadState === false" class="content-wrap" style="min-height: 500px">
      <div style="display: flex; gap: 14px"></div>
      <div class="table">
        <div class="statistics-block">
          <div v-for="i in statisticsData" :key="i.flag" class="statistics">
            <div class="title">{{ i.name }}</div>
            <div class="value">{{ i.format(censusData) }}</div>
          </div>
        </div>
        <el-table v-loading="baseData.loading" max-height="50vh" border :data="list" showOverflowTooltip stripe style="width: 100%">
          <el-table-column fixed type="index" label="编号" sortable width="60" align="center" headerAlign="center"></el-table-column>
          <el-table-column label="时间" fixed prop="referralLinkName" minWidth="140">
            <template #default="{ row }">
              <span v-if="dataType === 0">{{ proxy.$dayjs(row.thatdayHoursTimestamp * 1000).format('YYYY-MM-DD HH:mm') }}</span>
              <span v-if="dataType === 1">{{ proxy.$dayjs(row.thatdayMintuesTimestamp * 1000).format('YYYY-MM-DD HH:mm') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="账户消耗" prop="cost" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.cost) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增充值" prop="thatdayTotalAmount" width="120" sortable></el-table-column>
          <el-table-column label="新增分成金额" prop="thatdayDividendAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.thatdayDividendAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增广告收益" prop="iaaTotalAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.iaaTotalAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增广告分成" prop="iaaDividendAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.iaaDividendAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="利润" prop="thatdayProfitAmount" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.thatdayProfitAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回本率" prop="extRecoveryRate" minWidth="120">
            <template #default="{ row }">
              <span>{{ row.extRecoveryRate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="展示数" prop="show" width="120" sortable></el-table-column>
          <el-table-column label="平均千次展现费用" prop="avgShowCost" width="170" sortable></el-table-column>
          <el-table-column label="点击数" prop="click" width="120" sortable></el-table-column>
          <el-table-column label="点击成本" prop="avgClickCost" width="120" sortable></el-table-column>
          <el-table-column label="点击率" prop="ctr" width="120" sortable></el-table-column>
          <el-table-column label="转化数" prop="convert" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化成本" prop="convertCost" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化率" prop="convertRate" minWidth="110" sortable></el-table-column>
          <el-table-column label="激活数" prop="active" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费人数" prop="thatdayPaidUseNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费次数" prop="thatdayPaidTotalNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费成本" prop="extPayCost" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extPayCost }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客单价" prop="extAvgPrice" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extAvgPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回传率" prop="" minWidth="110">
            <template #default="{ row }">
              <span>{{ convertToPercentage(row.convert, row.thatdayPaidUseNum) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <base-empty
      v-else
      style="height: 100%"
      :description="pageLoad.description || ''"
      :imageSize="240"
      :loadState="pageLoad.loadState"
      :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
    ></base-empty>
  </el-dialog>
</template>

<script setup lang="ts">
  import {
    type CensusHoursRequest,
    type DataConsumptionSpeedMinuteItem,
    type OceEverydayCostCensusData,
    getCensusHoursPageJl,
    getCensusMinutePageJl,
  } from '@/api/marketing-management';
  import { convertToPercentage, formatNumberWithMoney } from '@/utils/numb';

  const { proxy } = getCurrentInstance() as any;

  type $ShowData = {
    referralLinkId: number;
    thatdayTimestamp: number;
  };

  const baseData = shallowReactive({
    /** 加载状态 */
    loading: false,
    /** 总数量 */
    total: 0,
  });

  const dataType = ref<0 | 1>(0);
  const filterData = ref<CensusHoursRequest>({
    thatdayTimestamp: undefined,
    referralLinkId: undefined,
  });

  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });

  const dialogVisible = ref(false);
  const censusData = ref<OceEverydayCostCensusData>({
    cost: null,
    thatdayPaidTotalNum: null,
    thatdayProfitAmount: null,
    thatdayTotalAmount: null,
  });
  const list = ref<DataConsumptionSpeedMinuteItem[]>([]);
  /** 请求 */
  async function getBaseDataAxios(getCensusData = true) {
    try {
      getCensusData && (pageLoad.loadState = true);

      if (dataType.value === 0) {
        const res = await getCensusHoursPageJl(filterData.value);
        censusData.value = res.data.totalData;
        list.value = res.data.hoursData;
      } else {
        const res = await getCensusMinutePageJl(filterData.value);
        list.value = res.data;
      }

      pageLoad.loadState = false;
    } catch (error) {
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    filterData.value.referralLinkId = data.referralLinkId;
    filterData.value.thatdayTimestamp = data.thatdayTimestamp;
    dialogVisible.value = true;
    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  interface StatisticsItem {
    name: string;
    flag: keyof OceEverydayCostCensusData;
    format: (val: OceEverydayCostCensusData) => number | string;
  }

  const statisticsData = ref<StatisticsItem[]>([
    {
      name: '总消耗金额',
      flag: 'cost',
      format(val) {
        return formatNumberWithMoney(val?.cost) ?? 0;
      },
    },
    {
      name: '总支付笔数',
      flag: 'thatdayPaidTotalNum',
      format(val) {
        return val?.thatdayPaidTotalNum ?? 0;
      },
    },
    {
      name: '总收入',
      flag: 'thatdayTotalAmount',
      format(val) {
        return formatNumberWithMoney(val?.thatdayTotalAmount || 0) ?? 0;
      },
    },
    {
      name: '总分成金额',
      flag: 'thatdayDividendAmount',
      format(val) {
        return formatNumberWithMoney(val?.thatdayDividendAmount || 0) ?? 0;
      },
    },
    {
      name: '总利润',
      flag: 'thatdayProfitAmount',
      format(val) {
        return formatNumberWithMoney(val?.thatdayProfitAmount || 0) ?? 0;
      },
    },
    {
      name: '回本率',
      flag: 'roic',
      format(val) {
        return `${val?.extRecoveryRate ?? 0}%`;
      },
    },
    // {
    //   name: '总时速',
    //   flag: 'costHoursSpeed',
    //   format(val) {
    //     return val ? (val?.costHoursSpeed ?? 0) : 0;
    //   },
    // },
  ]);

  defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
  .link-box {
    @include flex(row, nowrap, flex-start, center, center);
    width: 100%;
    height: 80px;
    padding: 15px;
    overflow: hidden;

    .title {
      display: inline-block;
      width: 64px;
      margin-right: 20px;
      font-size: 14px;
      text-align: left;
    }
  }

  .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .table {
      flex: 1;
    }

    .pagination-box {
      display: flex;
      justify-content: center;
    }
  }
</style>
